<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
let chartInstance = null;

const initChart = () => {
  chartInstance = echarts.init(chartContainer.value);
  chartInstance.setOption({
    title: {
      text: '二手交易平台不同品类商品交易数量统计',
      left: 'center',
      textStyle: {
        color: '#2c3e50',
        fontSize: 24,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(44,62,80,0.9)',
      borderColor: '#34495e',
      formatter: '{b}<br/>交易数量：{c} 件',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      data: ['电子产品', '家具家电', '服装配饰', '书籍文具', '母婴用品', '运动器材', '美妆护肤', '乐器'],
      axisLabel: {
        rotate: 45,
        color: '#34495e',
        fontSize: 14
      },
      axisLine: {
        lineStyle: {
          color: '#bdc3c7'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '交易数量（件）',
      nameTextStyle: {
        color: '#34495e',
        fontSize: 16,
        padding: [0, 0, 0, 40]
      },
      axisLabel: {
        color: '#7f8c8d',
        fontSize: 14
      },
      splitLine: {
        lineStyle: {
          color: '#ecf0f1'
        }
      }
    },
    series: [{
      name: '交易数量',
      type: 'bar',
      data: [1500, 1200, 900, 700, 650, 550, 400, 300],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#3498db' },
          { offset: 1, color: '#2980b9' }
        ]),
        borderRadius: [8, 8, 0, 0]
      },
      barWidth: '60%',
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(52,152,219,0.5)'
        }
      }
    }],
    grid: {
      containLabel: true,
      left: '5%',
      right: '5%',
      bottom: '15%',
      top: '18%'
    },
    dataZoom: [{
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      bottom: 20,
      height: 25,
      borderColor: '#ecf0f1',
      fillerColor: 'rgba(52,152,219,0.2)',
      textStyle: {
        color: '#2c3e50'
      }
    }]
  });
};

const handleResize = () => {
  chartInstance && chartInstance.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance && chartInstance.dispose();
});
</script>

<style scoped>
.chart-container {
  width: 100vw;
  height: 100vh;
  background: #f9fbfd;
}

/* 优化图表渲染 */
canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
</style>
    